<template>
    <div>
        <div ref="printContent" class="print-content">
            <!-- 左半部分 -->
            <div class="left-section">
                <div ref="qrcode" class="qr-code"></div>
                <p class="sku-text">{{ sku }}</p>
            </div>

            <!-- 右半部分 -->
            <div class="right-section">
                <p class="product-name">{{ displayProductName  }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import QRCode from 'qrcode'
import printJS from 'print-js'

export default {
    name: 'PrintPage',
    props: {
        sku: {
            type: String,
            required: true,
        },
        productName: {
            type: String,
            required: false,
            default: '',
        },
    },
    mounted() {
        // 在组件加载时生成二维码
        this.generateQRCode(this.sku)
    },
    watch: {
        sku(newSku) {
            this.generateQRCode(newSku)
        }
    },
    computed: {
        displayProductName() {
            if (this.productName.length > 29) {
                return this.productName.substring(0, 29) + '...';
            }
            return this.productName;
        }
    },
    methods: {
        async generateQRCode(sku) {
            try {
                // 使用qrcode库生成二维码
                const qrCodeUrl = await QRCode.toDataURL(sku)
                // 将二维码显示在页面上
                this.$refs.qrcode.innerHTML = `<img src="${qrCodeUrl}" alt="QR Code" />`
            } catch (error) {
                console.error('生成二维码失败:', error)
            }
        },
        printPage() {
            // 使用print.js打印页面
            printJS({
                printable: this.$refs.printContent,
                type: 'html',
                targetStyles: ['*'], // 打印时保留页面样式
                header: null,
                footer: null,
                style: `
                    @page {
                        size: 60mm 40mm;
                        margin: 0;
                        padding: 0;
                    }
                `
            })
        },
    },
}
</script>

<style scoped>
.print-content {
    width: 60mm;
    /* 让内容整体宽度 60mm */
    height: auto;
    box-sizing: border-box;
    /* 可以给父级一个简单的 flex 布局 */
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    /* 或者 space-around */
    /* align-items: center; */
    /* 垂直居中 */
    /* 也可以自己根据需要做 padding 或者 margin */
    margin: 0;
    padding: 0;
}

.left-section {
    width: 50%;
    text-align: center;
}

.right-section {
    width: 50%;
    /* text-align: center; */
    margin: 0;
    padding: 0;
}

/* 二维码的宽高可以自己调 */
.qr-code img {
    width: 100%;
    height: 60%;
}

.qr-code {
    width: 100%;
    height: 70%;
    /* border: 1px solid black; */
}

.sku-text {
    font-size: 8px;
    font-weight: 900;
}

.product-name {
    font-size: 14px;
    font-weight: 900;
    white-space: normal;
    /* 让文本可以换行 */
    word-wrap: break-word;
    /* 自动换行并防止长单词溢出 */
    word-break: break-all;
    /* 如果有特别长的词，也能断开 */

}
</style>
